<template>
  <div class="topology-container">
    <svg :width="width" :height="height">
      <!-- 根据 act.run 控制线条颜色 -->
      <line
        v-for="line in lines"
        :key="line.id"
        :x1="line.x1"
        :y1="line.y1"
        :x2="line.x2"
        :y2="line.y2"
        :stroke="line.run === true ? 'limegreen' : 'gray'"
        stroke-width="1"
      />

      <!-- 插入组件节点 -->
      <foreignObject
        v-for="node in nodes"
        :key="node.id"
        :x="node.x"
        :y="node.y"
        width="40"
        height="60"
      >
        <component :is="node.component" />
      </foreignObject>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watchEffect } from 'vue'
import { act } from '../../websocket'
// 引入其他页面组件

import WindowsServer from "./PLC/WindowsServer.vue";
import PLC2_2_N from "./PLC/PLC2_2_N.vue";
import PLC2_2 from "./PLC/PLC2_2.vue";
import PLC2_2GMJ from "./PLC/PLC2_2GMJ.vue";
import PLC3_1 from "./PLC/PLC3_1.vue";
import PLC3_1GMJ from "./PLC/PLC3_1GMJ.vue";
import PLC4_2_1 from "./PLC/PLC4_2_1.vue";
import PLC4_2_2 from "./PLC/PLC4_2_2.vue";
import PLC4_2_N from "./PLC/PLC4_2_N.vue";
import PLC4_2GMJ from "./PLC/PLC4_2GMJ.vue";
import PLC5_2_1 from "./PLC/PLC5_2_1.vue";
import PLC5_2_2 from "./PLC/PLC5_2_2.vue";
import PLC5_2_N from "./PLC/PLC5_2_N.vue";
import PLCMain from "./PLC/PLCMain.vue";
import PLC101 from "./PLC/PLC101.vue";
import PLC104_105 from "./PLC/PLC104_105.vue";
// 画布尺寸
const width = 1200
const height = 800

// 点位状态（你可以换成 WebSocket 数据）
// const act = reactive({ run: 0 })

// 线条配置
const lines = ref([
  { id: 'line1', x1: 560.5, y1: 95, x2: 20, y2: 150, run: act.run },
  { id: 'line2', x1: 566.5, y1: 96, x2: 105, y2: 150, run: act.run },
  { id: 'line3', x1: 572.5, y1: 97, x2: 190, y2: 150, run: act.run },
  { id: 'line4', x1: 578.5, y1: 98, x2: 275, y2: 150, run: act.run },

  { id: 'line5', x1: 584, y1: 99, x2: 355, y2: 150, run: act.run },
  { id: 'line6', x1: 590, y1: 100, x2: 435, y2: 150, run: act.run },
  { id: 'line7', x1: 596, y1: 101, x2: 520, y2: 150, run: act.run },

  { id: 'line8', x1: 600, y1: 102, x2: 600, y2: 150, run: act.run },

  { id: 'line9', x1: 604, y1: 101, x2: 680, y2: 150, run: act.run },
  { id: 'line10', x1: 610, y1: 100, x2: 765, y2: 150, run: act.run },
  { id: 'line11', x1: 616, y1: 99, x2: 850, y2: 150, run: act.run },

  { id: 'line12', x1: 622, y1: 98, x2: 935, y2: 150, run: act.run },
  { id: 'line13', x1: 628, y1: 97, x2: 1015, y2: 150, run: act.run },
  { id: 'line14', x1: 628, y1: 96, x2: 1095, y2: 150, run: act.run },
  { id: 'line15', x1: 634, y1: 95, x2: 1180, y2: 150, run: act.run },

])

// 跟随 act.run 更新线条状态
watchEffect(() => {
  lines.value.forEach((line) => {
    line.run = act.run
  })
})

// 节点组件（你已有的组件）
const nodes = ref([
  {
    id: 'WindowsServer',
    x: 580,
    y: 44,
    component: WindowsServer,
  },
  {
    id: 'PLC2_2_N',
    x: 0,
    y: 150,
    component: PLC2_2_N,
  },
  {
    id: 'PLC2_2',
    x: 82.5,
    y: 150,
    component: PLC2_2,
  },
  {
    id: 'PLC2_2GMJ',
    x: 165,
    y: 150,
    component: PLC2_2GMJ,
  },
  {
    id: 'PLC3_1',
    x: 247.5,
    y: 150,
    component: PLC3_1,
  },
  {
    id: 'PLC3_1GMJ',
    x: 330,
    y: 150,
    component: PLC3_1GMJ,
  },
  {
    id: 'PLC4_2_1',
    x: 412.5,
    y: 150,
    component: PLC4_2_1,
  },
  {
    id: 'PLC4_2_2',
    x: 495,
    y: 150,
    component: PLC4_2_2,
  },
  {
    id: 'PLC4_2_N',
    x: 580,
    y: 150,
    component: PLC4_2_N,
  },
  {
    id: 'PLC4_2_N',
    x: 662.5,
    y: 150,
    component: PLC4_2_N,
  },
  {
    id: 'PLC4_2_N',
    x: 745,
    y: 150,
    component: PLC4_2_N,
  },
  {
    id: 'PLC4_2_N',
    x: 827.5,
    y: 150,
    component: PLC4_2_N,
  },
  {
    id: 'PLC4_2_N',
    x: 910,
    y: 150,
    component: PLC4_2_N,
  },
  {
    id: 'PLC4_2_N',
    x: 992.5,
    y: 150,
    component: PLC4_2_N,
  },
  {
    id: 'PLC4_2_N',
    x: 1075,
    y: 150,
    component: PLC4_2_N,
  },
  {
    id: 'PLC4_2_N',
    x: 1157.5,
    y: 150,
    component: PLC4_2_N,
  },
])

// ✅ 测试用：2 秒后设置 run = 1（模拟数据变化）
// setTimeout(() => {
//   act.run = 1
// }, 2000)
</script>

<style scoped>
.topology-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #141c2e;
}
svg {
  position: absolute;
  top: 0;
  left: 0;
}

</style>
